<template>
    <!-- 分页组件 -->
    <section class="pagination-container">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="query.offset"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="query.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </section>
</template>
<script>
export default {
    name: 'pagination',
    props: {
        query: Object,
        total: Number
    },
    methods: {
        handleSizeChange(val) {
             this.query.limit = val
            this.getData();
        },
        handleCurrentChange(val) {
            this.query.offset = val;
            this.getData();
        },
        getData() {
            this.$emit('getData');
        }
    }
};
</script>
